<template>
  <div id="home">
    <van-nav-bar class="title" title="STORE LIVE" />
    <van-row>
      <div class="box">
        <van-swipe
          class="banner-swipe"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="imgbox">
        <div class="imgbox">
          <img class="img1" src="../assets/ms.png" alt="" />
          <van-count-down :time="time" class="timebox">
            <template #default="timeData">
              <span class="block">{{ timeData.hours + 12 }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <img class="img2" src="../assets/title.png" alt="" />
        </div>
        <div class="gridbox">
          <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="(icon, index) in icons" :key="index">
              <img :src="icon.path" />
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </van-row>
    <div class="card-box">
      <van-tabs id="tabs" v-model="active" color="#03a9f4">
        <van-tab :title="type.type_name" v-for="type in news" :key="type.id">
          <div id="list">
            <div class="news">
              <van-swipe-cell>
                <van-card
                  v-for="item in type.content"
                  :key="item.id"
                  class="item"
                  :num="item.num"
                  tag="秒杀"
                  :price="item.price"
                  :origin-price="item.origin_price"
                  :desc="item.create_time"
                  :title="item.title"
                  :thumb="path + item.img"
                >
                  <template #tags>
                    <div class="van_tag">
                      <van-tag plain type="danger">当日必达</van-tag>
                      <van-tag plain type="danger">新鲜保证</van-tag>
                    </div>
                  </template>
                  <template #footer>
                    <router-link :to="'/newsdetail/' + item.id">
                      <van-button size="mini" plain type="info"
                        >查看详情</van-button
                      >
                    </router-link>
                    <van-button
                      size="mini"
                      @click="buy($event)"
                      :id="item.id"
                      type="warning"
                      >加入购物车</van-button
                    >
                  </template>
                </van-card>
              </van-swipe-cell>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <my-bottom :active="0"></my-bottom>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import MyBottom from "@/components/MyBottom.vue";
import { Toast } from "vant";
import { newsBuy } from "../api";
export default {
  components: { MyBottom },
  data() {
    return {
      active: 0,
      news: [],
      time: 30 * 60 * 60 * 1000,
    };
  },
  computed: {
    // ...mapState(['badge'])
    ...mapState({
      images: (state) => state.images,
      icons: (state) => state.icons,
      imgs: (state) => state.imgs,
      path: (state) => state.path,
    }),
  },
  methods: {
    buy(a) {
      Toast("添加成功");
      newsBuy({ id: a.currentTarget.id })
        .then((res) => {
          console.log(res);
          this.item = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    //var _that=this;
    axios
      .get("/api/allnews.php")
      .then((response) => {
        console.log(this);
        this.news = response.data.data;
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {});
  },
};
</script>

<style scoped>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 20px;
  color: #fff;
  font-size: 10px;
  text-align: center;
  background-color: #ee0a24;
}

.timebox {
  float: left;
  margin: 2% 0;
}

#home {
  background: rgb(215, 229, 222);
  height: 100%;
}

.imgbox {
  margin: 2%;
  background-color: #fff;
  border-radius: 5%;
}

.img1 {
  width: 10%;
  float: left;
  margin-left: 5%;
}

.img2 {
  width: 50%;
  margin-right: 2%;
}
.gridbox img {
  width: 100;
}
>>> .van-nav-bar {
  background-color: rgb(24, 154, 100);
}

>>> .van-nav-bar__title {
  width: 1000px;
  font-family: "Microsoft YaHei";
  font-size: 20px;
  text-align: center;
  background: -webkit-linear-gradient(left, rgb(255, 251, 0), rgb(0, 208, 255))
    0 0 no-repeat;
  /*设置线性渐变*/
  -webkit-background-size: 80px;
  /*设置背景大小*/
  -webkit-background-clip: text;
  /*背景被裁剪到文字*/
  -webkit-text-fill-color: rgba(255, 223, 245, 0.877);
  /*设置文字的填充颜色*/
  -webkit-animation: shine 3s infinite;
  /*设置动画*/
}

@-webkit-keyframes shine {
  /*创建动画*/
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 100%;
  }
}

.banner-swipe img {
  width: 100%;
}

.icons {/* 
  text-align: center; */
  /* width: 75px;
  height: 75px; */
}

.card-box {
  margin: 0 2%;
  /* height: 100vh; */
  background-color: #fff;
}

.van-grid {
}

>>> .van-grid-item {
  /* 
  height: 110px;
  bottom: -5px; */
}

.d_gif {
  width: 100%;
  height: 50px;
}

.img_gif {
  z-index: -1;
  position: absolute;
  width: 100%;
  top: 170px;
  left: 0;
}

.gap {
  height: 10px;
  background: #35800c;
  margin-top: 100px;
}

.news {
  margin-bottom: 60px;
}

#news {
  padding-bottom: 50px;
  padding: 0 10px;
}

#news img {
  width: 90%;
  border-bottom: 1px solid lightgray;
}

.van-card__footer {
  bottom: 0;
}

#list .item {
  display: flex;
  border-bottom: 1px solid lightgray;
  flex-direction: column;
}

.box {
  width: 100%;
  margin: 0 auto;
  border-radius: 5%;
  /* 
  background-color: white; */
}
</style>
